<!--
 * @Descripttion: 报告管理-报告详情
 * @Author: 何伟伦 weilun@ssc-hn.com
 * @Date: 2024-04-18
 * @LastEditors: 颜博骏 bojun@ssc-hn.com
 * @LastEditTime: 2024-05-09
-->
<template>
  <div class="ssc-list report-position-list">
    <div class="add-header">
      <arrow-left-outlined :style="{ 'font-weight': 'bold', 'margin-right': '18px' }" @click="router.back()" />
      <span>报告详情</span>
    </div>
    <a-divider />
    <div class="ssc-table">
      <div class="menu">
        <div class="menu-item" :class="active === item.key ? 'active' : ''" v-for="item in items" :key="item.key" @click="OnActive(item)">{{ item.label }}</div>
      </div>
      <div class="basicInfo" v-if="active === IMenuEumn[0]">
        <a-descriptions layout="vertical" bordered>
          <a-descriptions-item label="码值">{{ basicData.codeValue }}</a-descriptions-item>
          <a-descriptions-item label="类别">{{ basicData.goodsName }}</a-descriptions-item>
          <a-descriptions-item label="状态">
            <a-badge status="success" text="正常" v-if="basicData.codeStatus === 1" />
            <a-badge status="error" text="作废" v-else />
          </a-descriptions-item>
          <a-descriptions-item label="渠道">{{ basicData.channelName }}</a-descriptions-item>
          <a-descriptions-item label="批次">{{ basicData.batchName }}</a-descriptions-item>
          <a-descriptions-item label="关联问卷">{{ basicData.contentTitle }}</a-descriptions-item>
          <a-descriptions-item label="关联位置">{{ basicData.location }}</a-descriptions-item>
        </a-descriptions>
        <a-descriptions layout="vertical" bordered>
          <a-descriptions-item label="添加记录">
            <a-table :columns="basicColumns" :data-source="basicData.operateLogList" bordered :pagination="false">
              <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'userName'">
                  <a>{{ `${record.userName ? record.userName : ''}(${record.loginName ? record.loginName : '--'})` }}</a>
                </template>
              </template>
            </a-table>
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="channelInfo" v-else-if="active === IMenuEumn[1]">
        <a-table :columns="channelColumns" :data-source="channelData" bordered :pagination="false" />
      </div>
      <div class="channelInfo" v-else>
        <a-table :columns="codeColumns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <span>
                <a @click="check(record)">查看</a>
              </span>
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ArrowLeftOutlined } from '@ant-design/icons-vue'
  import { onMounted, reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'

  import { requestGetChannelInfo } from '/@/api/business/tracecode/channelCodeInfo'
  import { requestGetAssociationInfo } from '/@/api/business/tracecode/codeAssociation'
  import { requestCodeDetail } from '/@/api/business/tracecode/codeInfo'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'
  const active = ref<string>('basicInfo')
  const router = useRouter()
  const codeValue = ref<string>('')

  interface IMenuItem {
    key: string
    label: string
  }

  const IMenuEumn = {
    0: 'basicInfo',
    1: 'channelInfo',
    2: 'relatedCode',
  }

  const items = ref<IMenuItem[]>([
    {
      key: 'basicInfo',
      label: '基本信息',
    },
    {
      key: 'channelInfo',
      label: '渠道信息',
    },
    {
      key: 'relatedCode',
      label: '关联码',
    },
  ])

  const basicData = ref<UpCodeDetailsTypes.IResponse>({
    /** 码值 */
    codeValue: '',
    /** 商品名称 */
    goodsName: '',
    /** 渠道名称 */
    channelName: '',
    /** 批次名称 */
    batchName: '',
    /** 关联问卷 */
    contentTitle: '',
    /** 位置 */
    location: '',
    /** 坐标 */
    coordinates: '',
    /** 照片url */
    photoUrl: '',
    /** 操作记录 */
    operateLogList: [],
    /** 码值id */
    codeInfoId: '',
    /** 问卷id:已答题 */
    questionnaireRecordId: '',
    /** 码状态1-正常2-作废 */
    codeStatus: 1,
    /** 关联码信息 */
    associationCodes: [],
  })
  /** 搜索条件 */
  const searchParam = reactive({
    /**码值 */
    codeValue: router.currentRoute.value.query.codeValue as any,
  })
  const channelData = ref<GetChannelInfoTypes.IResponse[]>([])
  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<GetAssociationInfoTypes.IRequest, GetAssociationInfoTypes.IResponse[]>(searchParam, requestGetAssociationInfo)
  onMounted(() => {
    codeValue.value = router.currentRoute.value.query.codeValue as any
    GetBasicData()
    GetChannelInfo()
  })

  const OnActive = (item: IMenuItem) => {
    active.value = item.key
  }

  /**基本信息 */
  const GetBasicData = async () => {
    const params = { codeValue: codeValue.value }
    const { responseData } = await requestCodeDetail(params)
    basicData.value = { ...responseData }
  }

  const basicColumns = [
    {
      title: '操作人',
      dataIndex: 'userName',
    },
    {
      title: '内容',
      dataIndex: 'notes',
    },
    {
      title: '添加时间',
      dataIndex: 'createdTime',
    },
    {
      title: '区块链识别码',
      dataIndex: 'blockchainCode',
    },
  ]

  /**渠道信息 */
  const GetChannelInfo = async () => {
    const params = { codeValue: codeValue.value }
    const { responseData } = await requestGetChannelInfo(params)
    channelData.value = responseData
  }

  const channelColumns = [
    {
      title: '操作人',
      dataIndex: 'createdByName',
    },
    {
      title: '渠道名称',
      dataIndex: 'channelsName',
    },
    {
      title: '关联时间',
      dataIndex: 'createdTime',
    },
  ]

  /** 关联码 */
  const codeColumns = [
    {
      title: '码值',
      dataIndex: 'codeValue',
      key: 'codeValue',
    },
    {
      title: '批次名称',
      dataIndex: 'batchName',
      key: 'address',
    },
    {
      title: '商品',
      key: 'goodName',
      dataIndex: 'goodName',
    },
    {
      title: '关联时间',
      key: 'createdTime',
      dataIndex: 'createdTime',
    },
    {
      title: '操作',
      key: 'action',
    },
  ]

  // const codeData = [
  //   {
  //     index: '1',
  //     codeValue: 'John Brown',
  //     batchName: 32,
  //     goodName: 'New York No. 1 Lake Park',
  //     createdtime: 'New York No. 1 Lake Park',
  //   },
  // ]

  const check = (record) => {
    router.push({
      path: '/report/uploadReport',
      query: {
        codeValue: record.codeValue,
      },
    })
  }

  onMounted(() => {
    queryList()
  })
</script>

<style lang="less" scoped>
  .report-position-list {
    background: #fff;
    padding-bottom: 32px;

    .add-header {
      font-size: 18px;
      font-weight: 500;
      color: #000;
      padding: 22px 0 0 26px;
    }

    .menu {
      display: flex;
      height: 50px;
      text-align: center;
      margin-bottom: 16px;

      .menu-item {
        width: 100px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        // color: rgb(255 255 255 / 65%);
        color: black;
        cursor: pointer;

        &:not(:first-child) {
          margin-left: 32px;
        }

        &.active {
          color: #08979c;
          border-bottom: 2px solid #08979c;
        }
      }
    }
  }
</style>
